<template>
  <header-view :title="address"></header-view>
  <van-address-edit
    :area-list="areaList"
    show-delete
    show-set-default
    show-search-result
    :address-info="addressInfo"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script>
import HeaderView from "@/components/HeaderView.vue";
import { reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { showToast } from "vant";
export default {
  components: {
    HeaderView,
  },
  setup() {
    let store = useStore();
    let route = useRoute();
    let router = useRouter();
    const data = reactive({
      areaList: {
        province_list: {
          110000: "北京",
          120000: "天津",
          130000: "上海",
          140000: "重庆",
          150000: "河北省",
          160000: "山西省",
          170000: "辽宁省",
          180000: "吉林省",
          190000: "黑龙江省",
          200000: "江苏省",
          210000: "浙江省",
          220000: "安徽省",
          230000: "福建省",
          240000: "江西省",
          250000: "山东省",
          260000: "河南省",
          270000: "湖北省",
          280000: "湖南省",
          290000: "广东省",
          300000: "海南省",
          310000: "四川省",
          320000: "贵州省",
          330000: "云南省",
          340000: "陕西省",
          350000: "甘肃省",
          360000: "青海省",
          370000: "内蒙古自治区",
          380000: "广西壮族自治区",
          390000: "西藏自治区",
          400000: "宁夏回族自治区",
          410000: "新疆维吾尔自治区",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
          130100: "上海市",
          140100: "重庆市",
          150100: "石家庄市",
          160100: "太原市",
          170100: "沈阳市",
          170200: "大连市",
          180100: "长春市",
          190100: "哈尔滨市",
          200100: "南京市",
          210100: "杭州市",
          220100: "合肥市",
          230100: "福州市",
          230200: "厦门市",
          240100: "南昌市",
          250100: "济南市",
          250200: "青岛市",
          260100: "郑州市",
          260200: "洛阳市",
          270100: "武汉市",
          280100: "长沙市",
          290100: "广州市",
          290200: "深圳市",
          300100: "海口市",
          300200: "三亚市",
          310100: "成都市",
          320100: "贵阳市",
          330100: "昆明市",
          340100: "西安市",
          350100: "兰州市",
          360100: "西宁市",
          370100: "呼和浩特市",
          380100: "南宁市",
          390100: "拉萨市",
          400100: "银川市",
          410100: "乌鲁木齐市",
        },
        county_list: {
          110101: "朝阳区",
          110102: "海淀区",
          120101: "和平区",
          130101: "浦东区",
          140101: "渝中区",
          150101: "长安区",
          160101: "小店区",
          170101: "和平区",
          170201: "中山区",
          180101: "南关区",
          190101: "南岗区",
          200101: "玄武区",
          210101: "上城区",
          220101: "庐阳区",
          230101: "鼓楼区",
          230201: "思明区",
          240101: "东湖区",
          250101: "历下区",
          250201: "崂山区",
          260101: "二七区",
          260201: "洛龙区",
          260202: "西工区",
          260203: "涧西区",
          260204: "老城区",
          260205: "汝阳县",
          270101: "江汉区",
          280101: "芙蓉区",
          290101: "天河区",
          290201: "福田区",
          290202: "南山区",
          300101: "龙华区",
          300201: "天涯区",
          310101: "锦江区",
          320101: "南明区",
          330101: "五华区",
          340101: "莲湖区",
          350101: "城关区",
          360101: "城西区",
          370101: "新城区",
          380101: "江南区",
          390101: "达孜区",
          400101: "金凤区",
          410101: "天山区",
        },
      },
      addressInfo: {},
    });
    const address = computed(() => {
      return route.query.type === "add" ? "地址新增" : "地址编辑";
    });
    const onSave = (content) => {
      if (route.query.type === "add") {
        store.commit("addAddress", content);
      } else {
        store.commit("editAddress", content);
      }
      showToast("保存成功~");
      setTimeout(() => {
        router.back();
      }, 2000);
    };
    const onDelete = (content) => {
      store.commit("deleteAddress", content);
      showToast("删除成功~");
      setTimeout(() => {
        router.back();
      }, 2000);
    };
    const init = () => {
      store.state.userAddress.forEach((item) => {
        if (item.id === Number(route.query.id)) {
          data.addressInfo = item;
        }
      });
    };
    onMounted(() => {
      init();
    });
    return {
      onSave,
      onDelete,
      init,
      address,
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-switch--on {
  background-color: #ffc300;
}

::v-deep .van-button--primary {
  background-color: #ffc300;
  border-color: #ffc300;
}
</style>
